<template>
  <div class="box" style="height: 700px;overflow-y: auto;padding-right: 10px">
    <el-form v-loading="loading" ref="pram" :model="pram" :rules="rules" label-width="120px" @submit.native.prevent>
      <el-form-item label="标题" prop="title">
        <el-input v-model="pram.title" maxlength="20" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="pram.type" >
          <el-option v-for="item in articleType" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="合作社类型" prop="pram.cooperativeType">
        <el-select v-model="pram.cooperativeType" placeholder="请选择">
          <el-option v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      </el-form-item>

      <el-form-item label="封面图" prop="coverImage">
        <el-image
          v-if="pram.coverImage"
          style="width: 150px;height: 150px;margin-right: 10px;margin-bottom: 10px" fit="cover"
          :src="pram.coverImage"></el-image>
        <br v-if="pram.coverImage">
        <el-button size="mini" icon="el-icon-picture" type="primary" @click="showChooseImage=true">点击选择图片</el-button>
      </el-form-item>
      <el-form-item label="摘要" prop="introduction">
        <el-input v-model="pram.introduction" maxlength="40" placeholder="请输入摘要" />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model.number="pram.sort" type="number" maxlength="3" placeholder="请输入排序" />
      </el-form-item>
      <el-form-item label="显示" prop="status">
        <el-switch :active-value="1" :inactive-value="0" v-model="pram.status"></el-switch>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <Tinymce v-model="pram.content"></Tinymce>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlerSubmit('pram')">{{ isCreate===0?'确定':'更新' }}</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="上传图片"
      :visible.sync="showChooseImage"
      width="896px"
      :before-close="handleClose"
      :modal="false"
    >
      <upload-index v-if="showChooseImage" :checkedMore="[]" :isMore="'1'" @getImage="getImage" />
    </el-dialog>
  </div>
</template>

<script>
import {
  save
} from '@/api/article'
import { Debounce } from '@/utils/validate'
import Tinymce from "@/components/Tinymce/index";
export default {
  name: "ArticleEdit",
  components:{Tinymce},
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    articleType:{
      type:Array,
      default:()=>[],
    },
    editData: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      options: [{
          value: 1,
          label: '专业大户'
        }, {
          value: 2,
          label: '家庭农场'
        }, {
          value: 3,
          label: '农民合作社'
        }, {
          value: 4,
          label: '农业企业'
        }],
      showChooseImage:false,
      loading:false,
      pram: {
        id: 0,
        title:'',
        coverImage:'',
        introduction:'',
        content:'',
        sort:0,
        status:1,
        type:null,
        cooperativeType:null,
      },
      rules: {
        title: { required: true, message: '请填写标题', trigger: ['blur'] },
        coverImage: { required: true, message: '请上传封面图', trigger: ['blur'] },
        introduction: { required: true, message: '请填写摘要', trigger: ['blur'] },
        content: { required: true, message: '请填写内容', trigger: ['blur'] },
        sort: { required: true, message: '请填写排序', trigger: ['blur'] },
        type: { required: true, message: '请选择类型', trigger: ['blur'] },
        cooperativeType: { required: true, message: '请选择合作社类型', trigger: ['blur'] },
      },
    }
  },
  mounted() {
    this.initEditData();
  },
  methods: {
    handleClose(){
      this.showChooseImage=false
    },
    getImage(img,type) {
      this.pram.coverImage=img[0].attDir;
      this.showChooseImage=false;
    },
    close() {
      this.$emit('hideEditDialog')
    },
    initEditData() {
     

      if (this.isCreate !== 1) return //不是编辑页，即新增页则直接返回
      const {  id,title,coverImage,introduction,content,sort,status,type,cooperativeType} = this.editData
      this.pram.id=id;
      this.pram.title=title;
      this.pram.coverImage=coverImage;
      this.pram.introduction=introduction;
      this.pram.content=content;
      this.pram.sort=sort;
      this.pram.status=status;
      this.pram.type=type;
      this.pram.cooperativeType=cooperativeType;
    },
    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        this.loading=true;
        save(this.pram).then(data => {
          this.$message.success('保存成功')
          this.$emit('hideEditDialog')
        }).finally(()=>{
          this.loading=false;
        })
      })
    }),
  }
}
</script>
<style>
.box::-webkit-scrollbar{
  width: 0;
}
</style>
